<script setup>
import OImage from "../setting/Images.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Editor from "../setting/Editor.vue";
import Slider from "../setting/Slider.vue";
import Color from "../setting/Color.vue";
const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  group: {
    type: Object,
  },
});
const { group, name } = toRefs(props);
const emits = defineEmits(["update:config", "change"]);
const form = ref({
  $position: { top: 0, left: 0 },
  $size: { width: 375, height: 50 },
  $positionType: "absolute",
  $removeable: true,
  borderRadius: 0,
  bgShow: false,
  textPosition: { top: 10, left: 10 },
  textSize: { width: 345, height: 30 },
  selectList: [],
  name: name.value,
  type: 1,
  rightIcon: "",
  leftIcon: "",
  showRight: false,
  showLeft: false,
  size: 12,
  color: "",
});
const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const onChange = (val) => {
  detail.value = detail.value;
  console.log("[ detail.value ]", detail.value);
  console.log("[ componentList.value ]", group.value);
};
const selectComList = computed(() => {
  return group.value.map((item) => item.type == "SelectBox");
});
// Dialog部分
const showDialog = ref(false);
const dialogFormRef = ref();
const itemIndex = ref("");
const dialogForm = ref({
  label: "",
});
const dialogRules = ref({
  label: [{ required: true, message: "请选输入值", trigger: "change" }],
});

const toEdit = (idx) => {
  itemIndex.value = idx;
  dialogForm.value = JSON.parse(JSON.stringify(detail.value.selectList[idx]));
  showDialog.value = true;
};

const delSelectItem = (idx) => {
  ElMessageBox.confirm(`确认删除？`, "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    detail.value.selectList.splice(idx, 1);
  });
};
const onSubmit = () => {
  if (detail.value.selectList.length === 0) {
    detail.value.selectList.push(JSON.parse(JSON.stringify(dialogForm.value)));
  } else {
    if (
      detail.value.selectList.find((item) => {
        if (item.label == dialogForm.value.label) {
          return true;
        }
      })
    ) {
      ElMessage.warning("值重复请重新填写");
      return;
    }
    if (itemIndex.value) {
      detail.value.selectList.splice(
        itemIndex.value,
        1,
        JSON.parse(JSON.stringify(dialogForm.value))
      );
    } else {
      detail.value.selectList.push(JSON.parse(JSON.stringify(dialogForm.value)));
    }
  }

  onClose();
  onChange();
};
const onClose = () => {
  showDialog.value = false;
  itemIndex.value = "";
  dialogFormRef.value.resetFields();
  onChange();
};

onMounted(() => {
  onChange();
});
</script>
<template>
  <el-form :model="detail" label-width="auto" :disabled="disabled">
    <!-- <el-form-item label="位置类型">
      <el-radio-group
        v-model="detail.$positionType"
        @change="changePositionType"
      >
        <el-radio v-for="item in typeList" :label="item.key">{{
          item.label
        }}</el-radio>
      </el-radio-group>
    </el-form-item> -->
    <el-form-item label="选项名称">
      <el-input v-model="detail.name" placeholder="请输入选项名称" @input="onChange" />
    </el-form-item>
    <!-- <el-form-item label="类型">
      <el-radio-group v-model="detail.type" @change="onChange">
        <el-radio :label="1">单选</el-radio>
        <el-radio :label="0">多选</el-radio>
      </el-radio-group>
    </el-form-item>  -->
    <el-form-item label="选项值">
      <div style="width: 100%">
        <el-button type="primary" link @click="showDialog = true">添加</el-button>
      </div>
      <div class="_select-box" v-show="detail.selectList.length">
        <div class="_item_text" v-for="(item, idx) in detail.selectList" :key="idx">
          <span @click="toEdit(idx)">{{ item.label }}</span>
          <el-icon :size="18" @click="delSelectItem(idx)"><Close /></el-icon>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="值">
      <el-select v-model="value" placeholder="值" @change="onChange">
        <el-option
          v-for="item in detail.selectList"
          :key="item.label"
          :label="item.label"
          :value="item.label"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="显示限制">
      <el-select v-model="value" placeholder="请选择显示限制" @change="onChange">
        <el-option
          v-for="item in selectComList"
          :key="item.uid"
          :label="item.name"
          :value="item.uid"
        />
      </el-select>
    </el-form-item>

    <Slider
      v-model="detail.size"
      name="文字大小"
      :min="12"
      :max="20"
      @change="onChange"
    />
    <Color v-model="detail.color" name="文字颜色" tip="描述文字" @change="onChange" />
    <!-- <OImage
      v-model="detail.leftIcon"
      v-model:show="detail.showLeft"
      name="名称前缀"
      @change="onChange"
    />
    <OImage
      v-model="detail.rightIcon"
      v-model:show="detail.showRight"
      name="名称后缀"
      @change="onChange"
    /> -->
  </el-form>
  <Dialog
    :model-value="showDialog"
    title="设置下拉选项"
    :width="500"
    @confirm="onSubmit"
    @close="onClose"
  >
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      :rules="dialogRules"
      label-width="80px"
    >
      <el-form-item label="值" prop="label">
        <el-input v-model="dialogForm.label" />
      </el-form-item>
    </el-form>
  </Dialog>
</template>

<style lang="scss" scoped>
._select-box {
  display: block;
  align-items: center;
}
._item_text {
  display: flex;
  margin-bottom: 5px;
  align-items: center;
  span {
    display: inline-block;
    background: #ddd;
    line-height: 20px;
    width: 200px;
    text-align: center;
  }
  .el-icon {
    margin-left: 5px;
    cursor: pointer;
  }
}
</style>
